<!-- 图表组件 -->
<template>
    <view class="chart_content_item">
        <LEchart ref="chartRef"></LEchart>
    </view>
</template>

<script lang="ts" setup>
    import LEchart from "@/components/l-echart/l-echart.vue"
    import { ref, onMounted, watch } from "vue"
    // #ifdef H5
    import * as echarts from 'echarts'
    // #endif
    // #ifdef MP-WEIXIN
    const echarts = require('../../static/echarts.min.js')
    // #endif
    const chartRef = ref()
    const props = defineProps({
        option: {
            type: Object
        }
    })
    onMounted(() => {
        setTimeout(() => {
            if (!chartRef.value) return
            chartRef.value.init(echarts, chart => {
                chart.setOption(props.option)
            })
        }, 300)
    })
    watch(() => props.option, (newVal, oldVal) => {
        if (chartRef.value) {
            chartRef.value.init(echarts, chart => {
                chart.setOption(newVal)
            })
        }
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
    .chart_content_item {
        width: 100%;
        height: 100%;
    }
</style>
